import styles from "@styles/confirm.module.less";
import ReactDOM from "react-dom";
import classNames from "classnames";
import {
  forwardRef,
  useCallback,
  useEffect,
  useImperativeHandle,
  useState,
} from "react";

export interface ConfirmRef {
  open: () => void; // 打开确认框的方法
  close: () => void; // 关闭确认框的方法
}

interface Props {
  confirm: () => void; // 确定按钮的回调函数
  title?: string; // 确认框的标题，可选
  content: string; // 确认框的内容
}

export default forwardRef<ConfirmRef, Props>((props, ref) => {
  // 控制确认框是否渲染的状态
  const [isRender, setIsRender] = useState(false);
  // 控制确认框是否执行动画的状态
  const [isActive, setIsActive] = useState(false);

  // 打开确认框的方法，设置isRender为true以渲染确认框
  const open = useCallback(() => {
    setIsRender(true);
  }, []);

  // 关闭确认框的方法，先设置isActive为false以执行关闭动画，然后延迟400ms后设置isRender为false以卸载确认框
  const close = useCallback(() => {
    setIsActive(false);
    setTimeout(() => {
      setIsRender(false);
    }, 400);
  }, []);

  // 使用useImperativeHandle自定义暴露给父组件的实例值，这里暴露了open和close方法
  useImperativeHandle(ref, () => ({ open, close }), [open, close]);

  // 当isRender状态变化时，如果为true，则设置isActive为true以开始动画
  useEffect(() => {
    if (isRender) {
      setIsActive(true);
    }
  }, [isRender]);

  // 如果isRender为true，则渲染并通过ReactDOM.createPortal将确认框渲染到document.body中
  // 使用classNames库动态添加active类以控制动画
  // props.title存在时显示props.title，否则显示默认的"温馨提示"
  // props.content显示确认框内容
  // 点击取消按钮调用close方法，点击确定按钮调用props.confirm方法
  return isRender
    ? ReactDOM.createPortal(
        <div
          className={classNames(styles.layer, { [styles.active]: isActive })}
        >
          <div className={styles.container}>
            <div className={styles.title}>
              {props.title ? props.title : "温馨提示"}
            </div>
            <div className={styles.content}>{props.content}</div>
            <div className={styles.buttons}>
              <button className={styles.cancel} onClick={close}>
                取消
              </button>
              <button className={styles.sure} onClick={() => props.confirm()}>
                确定
              </button>
            </div>
          </div>
        </div>,
        document.body
      )
    : null;
});